import React, { useState, useEffect, useCallback } from 'react';
import { 
  Card, 
  Typography, 
  Alert,
  List, 
  Tag, 
  Collapse, 
  Space, 
  Divider,
  Empty,
  Spin
} from 'antd';
import {
  InfoCircleOutlined,
  WarningOutlined,
  BulbOutlined,
  MessageOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import puaService from '../../api/puaService';

const { Title, Paragraph, Text } = Typography;
const { Panel } = Collapse;

/**
 * PUA类别详情组件
 * 展示特定PUA类别的详细信息、特征和应对策略
 */
const PUACategoryInfo = ({ categoryId, showExamples = true }) => {
  const [category, setCategory] = useState(null);
  const [patterns, setPatterns] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 获取严重程度对应的颜色
  const getSeverityColor = (severity) => {
    if (typeof severity === 'number') {
      if (severity >= 0.7) return 'red';
      if (severity >= 0.4) return 'orange';
      return 'blue';
    }
    
    switch(severity) {
      case 'high':
        return 'red';
      case 'medium':
        return 'orange';
      case 'low':
        return 'blue';
      default:
        return 'default';
    }
  };

  // 获取严重程度中文名称
  const getSeverityText = (severity) => {
    if (typeof severity === 'number') {
      if (severity >= 0.7) return '高';
      if (severity >= 0.4) return '中';
      return '低';
    }
    
    switch(severity) {
      case 'high':
        return '高';
      case 'medium':
        return '中';
      case 'low':
        return '低';
      default:
        return '未知';
    }
  };

  // 获取PUA类别信息
  const fetchCategoryInfo = useCallback(async () => {
    if (!categoryId) return;
    
    setLoading(true);
    setError(null);
    
    try {
      // 尝试从API获取数据
      let foundCategory = null;
      let categoryPatterns = [];
      
      try {
        // 获取类别基本信息
        const categoriesResponse = await puaService.getPUACategories();
        foundCategory = categoriesResponse.find(cat => cat.id === categoryId);
        
        // 获取此类别的PUA模式
        const patternsResponse = await puaService.getPUAPatterns(categoryId);
        categoryPatterns = patternsResponse || [];
      } catch (apiError) {
        console.log('API请求失败，使用模拟数据:', apiError);
        // API请求失败时不立即设置错误，先尝试使用模拟数据
      }
      
      // 如果API中找不到，使用示例数据
      if (!foundCategory) {
        foundCategory = sampleCategories.find(cat => cat.id === categoryId);
        if (!foundCategory) {
          foundCategory = { 
            id: categoryId, 
            name: categoryId.charAt(0).toUpperCase() + categoryId.slice(1).replace('_', ' '), 
            description: '此类别的详细信息正在完善中' 
          };
        }
      }
      
      // 如果没有获取到模式，使用示例数据
      if (categoryPatterns.length === 0) {
        categoryPatterns = samplePatterns.filter(p => p.category === categoryId);
      }
      
      setCategory(foundCategory);
      setPatterns(categoryPatterns);
    } catch (error) {
      console.error(`获取PUA类别 ${categoryId} 信息失败:`, error);
      setError('无法获取PUA类别信息，请稍后再试');
      
      // 使用示例数据作为备选
      const sampleCategory = sampleCategories.find(cat => cat.id === categoryId);
      if (sampleCategory) {
        setCategory(sampleCategory);
        setPatterns(samplePatterns.filter(p => p.category === categoryId));
      }
    } finally {
      setLoading(false);
    }
  }, [categoryId]);

  useEffect(() => {
    fetchCategoryInfo();
  }, [categoryId, fetchCategoryInfo]);

  // 示例数据
  const sampleCategories = [
    {
      id: "gaslighting",
      name: "精神操控（Gaslighting）",
      description: "使受害者质疑自己的记忆、感知和判断力的心理操控技术",
      details: "精神操控是一种通过系统性地否认和扭曲事实，使受害者开始怀疑自己的记忆、判断力和现实感知的心理操控手段。这种行为通常会让受害者感到困惑、自我怀疑，甚至开始认为自己的感受是无效的或错误的。",
      warningSignals: [
        "经常声称\"你记错了\"或\"那从未发生过\"",
        "坚持自己的行为是出于关心，而你的反应是过度的",
        "否认曾经说过的话，即使你有清晰的记忆",
        "指责你反应过度或太敏感",
        "把问题推给你的情绪或心理状态"
      ],
      copingStrategies: [
        "保持记录：写下发生的事情和对话，以便日后参考",
        "寻求外部验证：与信任的朋友或家人分享你的经历",
        "相信自己的感受：你的感受是有效的，不要让他人否定它们",
        "设定边界：明确表达不可接受的行为，并坚持这些边界",
        "必要时寻求专业帮助：心理咨询师可以提供支持和指导"
      ]
    },
    {
      id: "love bombing",
      name: "爱情轰炸（Love Bombing）",
      description: "通过过度的关注、赞美和承诺来快速建立感情依赖",
      details: "爱情轰炸是一种操控策略，通过在关系早期阶段过度地表达爱意、给予过多的关注和承诺，以快速建立情感依赖。这种行为通常包括频繁的信息、电话、礼物，以及太早做出重大承诺，如谈论婚姻或共同的未来。",
      warningSignals: [
        "关系发展极快，早期就表现出强烈的情感依恋",
        "过度赞美和过分关注",
        "不断送礼物或进行浪漫的姿态",
        "试图占据你的全部时间和注意力",
        "对关系进展速度施加压力"
      ],
      copingStrategies: [
        "保持警惕：健康的关系需要时间发展",
        "设定界限：明确表达你需要的空间和时间",
        "咨询朋友和家人：寻求外部观点",
        "关注一致性：注意行为是否与言辞相符",
        "保持独立：继续维持自己的兴趣、友谊和活动"
      ]
    }
  ];

  const samplePatterns = [
    {
      id: 1,
      pattern: "你一定是记错了，那天我根本没说过这样的话",
      category: "gaslighting",
      description: "通过否认已发生的事实，让对方质疑自己的记忆",
      severity: "high",
      examples: [
        "我们昨天根本没有约定今天见面，你一定是记错了",
        "我从来没说过要帮你做这件事，你是不是听错了？",
        "你总是把事情记错，这是你的问题"
      ],
      response_templates: [
        "我很确定我的记忆是准确的，我们可以用更建设性的方式讨论这个问题",
        "请不要否认已经发生的事情，这让我感到困惑和不被尊重",
        "我们可以各自有不同的记忆，但请不要完全否定我的感受"
      ]
    },
    {
      id: 2,
      pattern: "你太敏感了，我只是开个玩笑而已",
      category: "gaslighting",
      description: "通过指责对方反应过度来逃避责任",
      severity: "medium",
      examples: [
        "别那么敏感，正常人不会这样反应的",
        "你总是这么情绪化，根本无法理性沟通",
        "我只是开个玩笑，你没必要这么当真"
      ],
      response_templates: [
        "我有权利对让我不舒服的事情表达感受",
        "请尊重我的感受，不要将其简单归类为'过度敏感'",
        "如果一个玩笑让人感到不舒服，那就不再是玩笑了"
      ]
    },
    {
      id: 3,
      pattern: "我从没见过像你这么特别的人，我已经爱上你了",
      category: "love bombing",
      description: "在关系早期阶段表达过度的爱意和承诺",
      severity: "high",
      examples: [
        "虽然我们才认识两天，但我觉得你就是我一直在寻找的人",
        "没有你我无法想象我的未来，你是我的一切",
        "我愿意为你做任何事情，你就是我的全世界"
      ],
      response_templates: [
        "谢谢你的好意，但我认为我们应该给彼此时间来真正了解对方",
        "我觉得这种感情发展得太快了，我需要更多时间",
        "我希望我们的关系可以建立在相互了解和尊重的基础上，而不仅仅是强烈的情感表达"
      ]
    }
  ];

  if (loading) {
    return (
      <Card className="pua-category-card">
        <div style={{ textAlign: 'center', padding: '20px' }}>
          <Spin tip="加载中..." />
        </div>
      </Card>
    );
  }

  if (error) {
    return (
      <Card className="pua-category-card">
        <Alert
          message="加载错误"
          description={error}
          type="error"
          showIcon
        />
      </Card>
    );
  }

  if (!category) {
    return (
      <Card className="pua-category-card">
        <Empty description="未指定PUA类别或类别不存在" />
      </Card>
    );
  }

  return (
    <Card 
      title={
        <Space>
          <WarningOutlined />
          <span>{category.name}</span>
        </Space>
      }
      className="pua-category-card"
    >
      {/* 类别描述 */}
      <Paragraph>{category.description}</Paragraph>
      
      {category.details && (
        <Paragraph>{category.details}</Paragraph>
      )}
      
      <Divider />
      
      {/* 警示信号 */}
      {category.warningSignals && category.warningSignals.length > 0 && (
        <>
          <Title level={4}>
            <Space>
              <ExclamationCircleOutlined />
              <span>警示信号</span>
            </Space>
          </Title>
          <List
            size="small"
            bordered
            dataSource={category.warningSignals}
            renderItem={signal => (
              <List.Item>
                <Text>{signal}</Text>
              </List.Item>
            )}
          />
          <Divider />
        </>
      )}
      
      {/* 应对策略 */}
      {category.copingStrategies && category.copingStrategies.length > 0 && (
        <>
          <Title level={4}>
            <Space>
              <BulbOutlined />
              <span>应对策略</span>
            </Space>
          </Title>
          <List
            size="small"
            bordered
            dataSource={category.copingStrategies}
            renderItem={strategy => (
              <List.Item>
                <Text>{strategy}</Text>
              </List.Item>
            )}
          />
          <Divider />
        </>
      )}
      
      {/* 相关PUA模式 */}
      {patterns.length > 0 && (
        <>
          <Title level={4}>
            <Space>
              <InfoCircleOutlined />
              <span>常见表现</span>
            </Space>
          </Title>
          <Collapse>
            {patterns.map(pattern => (
              <Panel 
                key={pattern.id}
                header={
                  <Space>
                    <Text strong>{pattern.pattern}</Text>
                    <Tag color={getSeverityColor(pattern.severity)}>
                      风险等级: {getSeverityText(pattern.severity)}
                    </Tag>
                  </Space>
                }
              >
                <Paragraph>{pattern.description}</Paragraph>
                
                {showExamples && pattern.examples && pattern.examples.length > 0 && (
                  <>
                    <Title level={5}>
                      <Space>
                        <MessageOutlined />
                        <span>示例</span>
                      </Space>
                    </Title>
                    <List
                      size="small"
                      dataSource={pattern.examples}
                      renderItem={example => (
                        <List.Item>
                          <Text code>"{example}"</Text>
                        </List.Item>
                      )}
                    />
                  </>
                )}
                
                {pattern.response_templates && pattern.response_templates.length > 0 && (
                  <>
                    <Title level={5}>建议回应</Title>
                    <List
                      size="small"
                      dataSource={pattern.response_templates}
                      renderItem={response => (
                        <List.Item>
                          <Text type="success">"{response}"</Text>
                        </List.Item>
                      )}
                    />
                  </>
                )}
              </Panel>
            ))}
          </Collapse>
        </>
      )}
    </Card>
  );
};

export default PUACategoryInfo; 